<template>
  <div>
    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-form :model="filterForm" inline>
        <el-form-item label="状态">
          <el-select v-model="filterForm.status" placeholder="全部" style="width: 120px;">
            <el-option label="全部" value="" />
            <el-option label="未使用" value="未使用" />
            <el-option label="已使用" value="已使用" />
            <el-option label="已过期" value="已过期" />
          </el-select>
        </el-form-item>
        <el-form-item label="面值">
          <el-select v-model="filterForm.value" placeholder="全部" style="width: 120px;">
            <el-option label="全部" value="" />
            <el-option label="100-300元" value="100-300" />
            <el-option label="300-500元" value="300-500" />
            <el-option label="500-1000元" value="500-1000" />
            <el-option label="1000元以上" value="1000+" />
          </el-select>
        </el-form-item>
        <el-form-item label="领取时间">
          <el-date-picker v-model="filterForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始" end-placeholder="结束" style="width: 240px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 统计信息 -->
    <div class="stats-section">
      <el-row :gutter="16">
        <el-col :span="4">
          <div class="stat-item">
            <span class="stat-label">总优惠券：</span>
            <span class="stat-value">{{ filteredCouponList.length }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="stat-item">
            <span class="stat-label">未使用：</span>
            <span class="stat-value unused-count">{{ unusedCount }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="stat-item">
            <span class="stat-label">已使用：</span>
            <span class="stat-value used-count">{{ usedCount }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="stat-item">
            <span class="stat-label">已过期：</span>
            <span class="stat-value expired-count">{{ expiredCount }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="stat-item">
            <span class="stat-label">使用率：</span>
            <span class="stat-value">{{ usageRate }}%</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="stat-item">
            <span class="stat-label">过期率：</span>
            <span class="stat-value">{{ expiredRate }}%</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 优惠券表格 -->
    <el-table :data="filteredCouponList" border stripe style="width: 100%; margin-top: 16px;">
      <el-table-column prop="idx" label="序号" width="80" />
      <el-table-column prop="name" label="优惠券名称" width="160" />
      <el-table-column prop="value" label="面值" width="120" />
      <el-table-column prop="period" label="有效期" width="200" />
      <el-table-column prop="receiveTime" label="领取时间" width="180" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, computed, ref } from 'vue';

const props = defineProps<{ couponList: any[] }>();

// 筛选表单
const filterForm = ref({
  status: '',
  value: '',
  dateRange: []
});

// 筛选后的优惠券列表
const filteredCouponList = computed(() => {
  let filtered = [...props.couponList];
  
  // 状态筛选
  if (filterForm.value.status) {
    filtered = filtered.filter(item => item.status === filterForm.value.status);
  }
  
  // 面值筛选
  if (filterForm.value.value) {
    filtered = filtered.filter(item => {
      const value = parseInt(item.value.replace(/[^0-9]/g, ''));
      switch (filterForm.value.value) {
        case '100-300':
          return value >= 100 && value <= 300;
        case '300-500':
          return value > 300 && value <= 500;
        case '500-1000':
          return value > 500 && value <= 1000;
        case '1000+':
          return value > 1000;
        default:
          return true;
      }
    });
  }
  
  // 日期筛选
  if (filterForm.value.dateRange && filterForm.value.dateRange.length === 2) {
    const [start, end] = filterForm.value.dateRange.map(v => new Date(v).getTime());
    filtered = filtered.filter(item => {
      const receiveTime = new Date(item.receiveTime).getTime();
      return receiveTime >= start && receiveTime <= end;
    });
  }
  
  // 按领取时间倒序排列
  return filtered.sort((a, b) => {
    const timeA = new Date(a.receiveTime).getTime();
    const timeB = new Date(b.receiveTime).getTime();
    return timeB - timeA;
  });
});

// 统计计算
const unusedCount = computed(() => filteredCouponList.value.filter(item => item.status === '未使用').length);
const usedCount = computed(() => filteredCouponList.value.filter(item => item.status === '已使用').length);
const expiredCount = computed(() => filteredCouponList.value.filter(item => item.status === '已过期').length);

const usageRate = computed(() => {
  if (filteredCouponList.value.length === 0) return 0;
  return Math.round((usedCount.value / filteredCouponList.value.length) * 100);
});

const expiredRate = computed(() => {
  if (filteredCouponList.value.length === 0) return 0;
  return Math.round((expiredCount.value / filteredCouponList.value.length) * 100);
});

// 获取状态标签类型
function getStatusType(status: string) {
  const typeMap: Record<string, string> = {
    '未使用': 'success',
    '已使用': 'info',
    '已过期': 'danger'
  };
  return typeMap[status] || 'info';
}

// 搜索和重置
function onSearch() {
  // 筛选逻辑已在computed中处理
}

function onReset() {
  filterForm.value = {
    status: '',
    value: '',
    dateRange: []
  };
}
</script>

<style scoped>
.filter-section {
  margin-bottom: 16px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.stats-section {
  margin: 16px 0;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.stat-label {
  color: #606266;
  font-size: 14px;
}

.stat-value {
  font-weight: 600;
}

.unused-count {
  color: #67c23a;
}

.used-count {
  color: #409eff;
}

.expired-count {
  color: #f56c6c;
}
</style> 